<template>
  <div>
    <el-aside :width="asideWidth">
      <el-menu
        :default-active="currentMenuIndex"
        class="el-menu-vertical-demo"
        background-color="#1e222d"
        text-color="#7f8489"
        active-text-color="#fff"
        :collapse="isCollapse"
        :collapse-transition="false"
        :unique-opened="true"
      >
        <template v-for="item in menuData">
          <!-- 有子菜单项 -->
          <el-submenu
            :key="item.id"
            :index="item.id + ''"
            :class="subMenu_isFold"
            v-if="item.children"
          >
            <template slot="title">
              <!-- <i class="el-icon-location menuIconSize"></i> -->
              <img
                :src="getMenuIcon(item.iconImg)"
                :class="isCollapse ? 'menuIconSize' : 'smallIconSize'"
              />
              <span class="fold_text-false">{{ item.title }}</span>
              <span v-show="isCollapse" class="fold_text">{{ item.subtitle }}</span>
            </template>
            <!-- 菜单项 -->
            <div v-for="item2 in item.children" :key="item2.id">
              <template v-if="!item2.noShowMenu">
                <el-menu-item
                  class="fold_text-false"
                  :index="item2.id + ''"
                  @click="routeJump(item2.path, item2.fullTitle, item2.id, item.iconImg)"
                >
                  <span class="menuItemPoint">·</span>
                  {{ item2.title }}
                </el-menu-item>
              </template>
            </div>
          </el-submenu>
          <!-- 无子菜单项 -->
          <el-menu-item
            v-else
            :key="item.id"
            @click="routeJump(item.path, item.title, item.id, item.iconImg)"
            :index="item.id + ''"
            :class="subMenu_isFold_noSonMenu"
          >
            <!-- <i class="el-icon-location menuIconSize"></i> -->
            <img
              :src="getMenuIcon(item.iconImg)"
              :class="isCollapse ? 'menuIconSize' : 'smallIconSize'"
            />
            <span class="fold_text-false" slot="title">{{ item.title }}</span>
            <span v-show="isCollapse" class="fold_text">{{ item.subtitle }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <div class="foldBtn_content" :class="{ fold_true: isCollapse }">
      <!-- <i :class="foldIcon" @click="fold_btn" class="foldIconSize"></i> -->
      <img
        v-show="isCollapse"
        src="~@/assets/img/open.png"
        @click="fold_btn"
        :class="{ fold_true: isCollapse }"
      />
      <img
        v-show="!isCollapse"
        src="~@/assets/img/Put it away.png"
        @click="fold_btn"
        :class="{ fold_true: isCollapse }"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      currentMenuIndex: '10',
      menuData: [
        {
          id: 1,
          title: '数据大屏',
          subtitle: '大屏',
          iconImg: 'Large screen1.svg',
          path: '/bashboard/bashboard'
        },
        {
          id: 3,
          title: '源头管理',
          subtitle: '管理',
          iconImg: 'Administration1.svg',
          children: [
            {
              id: 14,
              title: '企业管理',
              fullTitle: '源头管理-企业管理',
              path: '/home/source_management'
            },
            {
              id: 20,
              title: '站点管理',
              fullTitle: '源头管理-站点管理',
              path: '/home/site_manage'
            },
            {
              id: 19,
              title: '车辆管理',
              fullTitle: '源头管理-车辆管理',
              path: '/home/cart_manage'
            }
          ]
        },
        {
          id: 2,
          title: '运营监测',
          subtitle: '监测',
          iconImg: 'monitor3.svg',
          children: [
            {
              id: 10,
              title: '实时预警',
              fullTitle: '运营监测-实时预警',
              path: '/home/early_warning'
            },
            {
              id: 11,
              title: '数据查询',
              fullTitle: '运营监测-数据查询',
              path: '/home/data_search'
            },
            {
              id: 24,
              title: '数据查询',
              fullTitle: '运营监测-数据查询-详情',
              path: '/home/data_search/detail',
              noShowMenu: true,
              noSetTitle: true
            },
            {
              id: 12,
              title: '视频监控',
              fullTitle: '运营监测-视频监控',
              path: '/home/video_surveillance'
            },
            {
              id: 13,
              title: '设备监控',
              fullTitle: '运营监测-设备监控',
              path: '/home/equipment_monitoring'
            },
            {
              id: 25,
              title: '设备管理',
              fullTitle: '运营监测-设备管理',
              path: '/home/equipment_management'
            }
          ]
        },

        {
          id: 4,
          title: '统计分析',
          subtitle: '统计',
          iconImg: 'Statistics1.svg',
          path: '/home/census'
        },
        {
          id: 5,
          title: '平台运维',
          subtitle: '运维',
          iconImg: 'operations1.svg',
          children: [
            {
              id: 21,
              title: '参数配置',
              fullTitle: '平台运维-参数配置',
              path: '/home/parameter_configure'
            },
            {
              id: 22,
              title: '用户管理',
              fullTitle: '平台运维-用户管理',
              path: '/home/user_manage'
            }
            // {
            //   id: 23,
            //   title: '角色管理',
            //   fullTitle: '平台运维-角色管理',
            //   path: '/home/role_manage'
            // }
          ]
        }
      ]
    }
  },
  created() {
    // 调用函数，获取当前菜单id
    this.getMenuIndex(this.menuData)
  },
  computed: {
    asideWidth() {
      return this.isCollapse ? '78px' : '248px'
    },
    subMenu_isFold() {
      return this.isCollapse ? 'subMenuSelect' : 'subMenuSelect_noFold'
    },
    subMenu_isFold_noSonMenu() {
      return this.isCollapse ? 'noSonMenu' : ''
    }
  },
  methods: {
    // 折叠菜单按钮点击
    fold_btn() {
      this.isCollapse = !this.isCollapse
      this.$bus.$emit('asideFoldeBtnClick', this.isCollapse)
    },
    getMenuIcon(iconImg) {
      // 使用require引用图片
      return require(`../../../assets/icon/${iconImg}`)
    },
    // 路由跳转
    routeJump(path, fullTitle, id, iconImg) {
      if (this.$route.fullPath === path) {
        return ''
      } else {
        this.$router.push(path)
        this.$emit('currentTitle', fullTitle, iconImg)
        this.currentMenuIndex = id + ''
      }
    },
    // 根据当前路由地址，查找菜单id
    getMenuIndex(data, icon) {
      for (const item of data) {
        if (item.children) {
          this.getMenuIndex(item.children, item.iconImg)
        } else {
          if (item.path === this.$route.path) {
            // 根据当前路由地址，查找路由匹配的模块标题
            this.$emit('currentTitle', item.fullTitle || item.title, icon || item.iconImg)
            // 根据当前路由地址，查找路由匹配的模块id
            this.currentMenuIndex = item.id + ''
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.el-aside {
  /* position: relative; */
  height: calc(100vh - 130px);
  background-color: #1e222d;
  /* padding-bottom: 70px; */
  padding-right: 18px;
}

.el-menu {
  border-right: none;
}

/* .collapse-transition {
} */

.subMenuSelect_noFold {
  width: 100%;
}

.subMenuSelect {
  position: relative;
  width: 78px;
  height: 68px;
}

.subMenuSelect >>> .el-submenu__title {
  height: 68px;
}

.noSonMenu {
  width: 78px;
  height: 68px;
}

.el-menu-item >>> .el-tooltip {
  width: 78px !important;
  height: 68px !important;
}

.el-menu-item.is-active .fold_text-false {
  color: #fff !important;
}

.el-submenu >>> .el-submenu__title:hover {
  background-color: #006eff !important;
  color: #fff !important;
}

.el-menu .el-menu-item .el-submenu__title {
  background-color: blue !important;
}

/* .el-menu .el-menu-item .el-submenu__title:hover {
  background-color: #006eff !important;
  color: #fff !important;
} */

/* .el-menu .el-menu-item {
  background-color: #151822 !important;
} */

.el-menu .el-menu-item:hover {
  background-color: #006eff !important;
  color: #fff !important;
}

/* 单项选中类名 */
.itemSelect {
  background-color: #006eff !important;
}

.fold_text-false {
  font-size: 16px;
  color: #c1c6c8;
}

.fold_text {
  position: absolute;
  bottom: 40px;
  left: 18px;
  font-size: 16px;
  padding-left: 3px;
  overflow: visible !important;
  visibility: visible !important;
}

.foldBtn_content {
  /* position: absolute; */
  bottom: 0;
  left: 0;
  width: 248px;
  height: 70px;
  line-height: 70px;
  padding-top: 8px;
  background-color: #262f3e;
}

.foldBtn_content img {
  color: #fff;
  /* font-size: 26px; */
  margin-left: 23px;
  cursor: pointer;
}

.fold_true {
  width: 78px;
  text-align: center;
}

.fold_true img {
  width: 32px;
  margin-left: 0;
}

.menuIconSize {
  width: 32px;
  height: 32px;
  color: #768088;
  font-size: 32px;
  padding-right: 5px;
}

.smallIconSize {
  width: 16px;
  height: 16px;
  color: #768088;
  font-size: 32px;
  padding-right: 5px;
}

.foldIconSize {
  font-size: 12px;
}

.menuItemPoint {
  position: relative;
  top: -4px;
  left: -10px;
  display: inline-block;
  font-size: 45px;
}
</style>
